<template>
	<view class="brief" style="width: 750rpx; overflow: hidden">
		<Top :title="title" :Gradient="true"></Top>

		<view class="brief_box">
			<image class="tox" :src="teatent.image_src"></image>
			<view class="name">{{ teatent.name }}</view>
			<view class="ltx">{{ teatent.type == 1 ? '摄影师' : '化妆师' }} | {{ teatent.work_year + '年' }} | {{ teatent.num }}人喜欢</view>
			<view class="rightMenu">
				<!-- 收藏 -->
				<view class="" @click="doGood" style="font-size: 0; margin-right: 32rpx">
					<image v-if="teatent.do == 1" style="width: 60rpx; height: 60rpx" src="./static/1.png" mode=""></image>
					<image v-else style="width: 60rpx; height: 60rpx" src="./static/7.png" mode=""></image>
				</view>
				<!-- 分享 -->
				<view class="" style="font-size: 0; margin-right: 32rpx" @click="fenXiang">
					<image style="width: 60rpx; height: 60rpx" src="./static/2.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 店铺信息 -->
		<view class="studio flex justify-between align-center" style="margin-top: 20rpx">
			<div class="leftbox flex">
				<div class="leftPhoto">
					<image :src="teatent.shop.avatar_url" mode=""></image>
				</div>
				<div class="center_details flex flex-column justify-between">
					<div class="top">
						{{ teatent.shop.shopname }}
					</div>
					<div class="tips flex align-center">
						<div class="tips_content">商品{{ teatent.shop.goods }}</div>
						<div class="line"></div>
						<div class="tips_content">访客{{ teatent.shop.views }}</div>
					</div>
				</div>
			</div>
			<div @click="goShopDetail" class="btn_goin">进店</div>
		</view>
		<view class="jianjie" style="margin-top: 20rpx">
			<view class="jianl">
				个人简介
				<image class="jnm" src="./static/3.png"></image>
			</view>
			<view class="jianr">
				<image class="jnr" src="../../static/teacher/yan.png"></image>
				{{ teatent.view }}
			</view>
		</view>

		<view class="daboxk">
			<view class="ziknm">
				<scroll-view class="sbox" :scroll-y="true">
					<!-- <bctos-rich-text :nodes="teatent.detail"></bctos-rich-text> -->
					<view class="text">
						<text>{{ teatent.detail }}</text>
					</view>
				</scroll-view>
			</view>
		</view>

		<view class="jianjie">
			<view class="jianl">
				擅长风格
				<image class="jnm" src="./static/4.png"></image>
			</view>
		</view>

		<scroll-view class="feng" :scroll-x="true">
			<view class="flex">
				<view class="dang" v-for="(item, index) in teatent.wedding" :key="index">
					<!-- <image class="tuk"></image> -->
					<image class="tuk" :src="item.image_src" mode=""></image>
					<view class="name">{{ item.name.substring(0, 4) }}</view>
				</view>
				<view class="dang">
					<!-- <image class="tuk"></image> -->
					<image class="tuk" style="background: transparent" mode=""></image>
				</view>
			</view>
		</scroll-view>
		<view class="jianjie">
			<view class="jianl">
				作品合集
				<image class="jnm" src="./static/5.png"></image>
			</view>
		</view>

		<view class="boxs">
			<scroll-view class="scroll" :scroll-x="true">
				<view v-for="(item, i) in list" :key="i" class="btn" @click="change(item, item.id, i)" :class="{ check: checkid == item.id }">
					{{ item.name }}
				</view>
				<view class="btn" style="width: 100rpx"></view>
				<view class="tiao" :style="{ left: checkidIndex * 120 + 41 + 'rpx' }"></view>
			</scroll-view>
			<view class="jian">
				<view class="jianl" :class="{ ent: showlx }" @click="showlx = !showlx"></view>
			</view>
		</view>
		<view class="lx_box" v-show="showlx">
			<scroll-view class="lx_scroll" :scroll-x="true">
				<view class="lx_btn" v-for="(item, i) in arrd" :key="i" :class="{ check: checkd == item.id }" @click="changea(item, item.id)">
					{{ item.name }}
				</view>
			</scroll-view>
			<scroll-view class="lx_scroll" :scroll-x="true">
				<view class="lx_btn" v-for="(item, i) in arrs" :key="i" :class="{ check: checkds == item.id }" @click="changeas(item, item.id)">
					{{ item.name }}
				</view>
			</scroll-view>
			<scroll-view class="lx_scroll" :scroll-x="true">
				<view class="lx_btn" v-for="(item, i) in arra" :key="i" :class="{ check: checkda == item.id }" @click="changeaa(item, item.id)">
					{{ item.name }}
				</view>
			</scroll-view>
		</view>
		<view class="" style="height: 20rpx"></view>
		<zero-waterfall :list="hunlist" type="3" :status="status" styleType="2"></zero-waterfall>
		<view style="height: 280upx"></view>

		<view class="chakan">
			<view class="head">
				<view class="hl" @click="seeDate">
					<image class="hjnm" src="../../static/teacher/yan.png"></image>
					<view class="naml">查看档期</view>
				</view>
				<view class="hr" @click="fen">{{ teatent.type == 1 ? '拍摄预约' : '预约' }}</view>
			</view>
		</view>
		<view class="pokml" v-if="qishow">
			<Schedule :paiqiObj="paiqiObj" @rightArrow="rightArrow" @leftArrow="leftArrow" :year="year" :month="mouth" @close="close" @enter="enter"></Schedule>
		</view>

		<!--全家福-->
		<uni-popup ref="popupdd" type="bottom" backgroundColor="transparent">
			<view class="boxkl">
				<view class="hbng">
					<view class="iconk" @click="coslepop"></view>
				</view>

				<scroll-view class="scoll" :scroll-y="true">
					<view class="txtg" v-for="(item, i) in tablist" :class="{ check: xs == item.id }" :key="i" @click="chans(item, item.id)">{{ item.name }}</view>
				</scroll-view>
			</view>
		</uni-popup>
		<uni-popup ref="popupfen" type="bottom" backgroundColor="transparent">
			<view class="boxfen">
				<view class="hbng" @click="clofenl">
					<img class="fenicon" src="@/static/loser.png" alt="" />
				</view>

				<view class="boxfen-list" @click="swpopup(item.index)" v-for="(item, i) in arrl" :key="i">
					<view class="boxfen-lei">
						<span>{{ item.lei }}</span>
					</view>
					<view :class="item.content == '请选择' || item.content == '不指定' ? 'flex-icon' : 'black'">
						<span>{{ item.content }}</span>
						<img style="width: 18upx; height: 18upx; display: inline-block; margin-left: 12upx" src="@/static/rightjian.png" alt="" />
					</view>
				</view>
				<view class="boxfen-btn">
					<button @click="nested">下一步</button>
				</view>
				<view class="" style="height: 20rpx"></view>
			</view>
		</uni-popup>

		<uni-popup ref="popups" type="bottom" backgroundColor="white">
			<choice
				:isShowStatus="true"
				:paiqiObj="paiqiObj"
				@rightArrow="rightArrow"
				@leftArrow="leftArrow"
				:year="year"
				:month="mouth"
				@clepop="clepop"
				@enterselect="goSelect"
			></choice>
		</uni-popup>
		<!-- 化妆师拍摄预约 -->
		<uni-popup :isbottom="true" ref="popupShow" type="bottom" backgroundColor="transparent">
			<view class="" style="background: #fff; border-radius: 32rpx 32rpx 0 0; font-size: 30rpx; color: #111; padding: 32rpx">
				<view class="" style="font-size: 0">
					<image style="width: 26rpx; height: 26rpx" src="../teacher/static/6.png" mode=""></image>
				</view>
				<view class="" @click="xinNianYuYue" style="text-align: center; padding: 22rpx 0">新娘预约</view>
				<view class="" @click="paiSheYuYue" style="text-align: center; padding: 22rpx 0">拍摄预约</view>
				<view class="" style="height: 20rpx"></view>
			</view>
		</uni-popup>
		<!-- 新娘预约弹窗 -->
		<view class="price_popup" v-show="orshow" @click.stop="orshow = false">
			<view class="box_inp" @click.stop>
				<view class="inph">
					<view class="icon" @click="orshow = false"></view>
				</view>
				<view class="titled">预约后，商家会安排专业顾问致电您～</view>

				<view class="inpd">
					<input class="inpty" v-model="name" placeholder="怎么称呼您？" placeholder-class="inps" />
				</view>
				<view class="inpd">
					<input class="inpty" v-model="phone" placeholder="您的联系方式" placeholder-class="inps" maxlength="11" />
				</view>
				<view class="inpd" style="overflow: hidden">
					<view class="head_riqi_box flex" style="flex: 1">
						<uni-datetime-picker :placeholder="'开始时间'" type="date" :value="startTime" start="2021-3-20" end="2111-6-30" @change="changeTime" style="width: 50%" />
						<view class="zhi_txt s26 family f500">至</view>
						<uni-datetime-picker :placeholder="'结束时间'" type="date" :value="endTime" start="2021-3-20" end="2111-6-30" @change="changeTime1" style="width: 50%" />
					</view>
					<!-- <view class="ickl"></view> -->
				</view>
				<view class="enty" @click="enters">确定</view>
			</view>
		</view>
		<!-- 弹框 -->
		<view class="price_popup" v-show="tshow" @click="tshow = false">
			<view class="tikun" @click.stop="">
				<view class="txt">{{ code == '1' ? '请保持电话畅通，工作人员稍后联系您～' : '不可重复预约' }}</view>
				<view class="ent" @click="tshow = false">确认</view>
			</view>
		</view>
		<!-- 选择时间 -->
		<view class="price_popup" v-if="selectTime" @click="selectTime = false">
			<view style="position: absolute; bottom: 0" @click.stop="">
				<view class="head_riqi_box w750 flex">
					<uni-datetime-picker type="date" :value="startTime" start="2021-3-20" end="2111-6-30" @change="changeTime" />
					<view class="zhi_txt s26 family f500">至</view>
					<uni-datetime-picker type="date" :value="endTime" start="2021-3-20" end="2111-6-30" @change="changeTime1" />
					<view class="shaixuan_btn s24 family f500 txtali" @click.stop="screenTime">确定</view>
				</view>
				<view class="" style="height: 100rpx; background: #fff"></view>
			</view>
		</view>
		<!-- 分享 -->
		<!-- :show="show" -->
		<share-box ref="child" :type="shareType"></share-box>
	</view>
</template>

<script>
import shareBox from '@/components/share.vue'; //分享
import Top from '../../components/navBox/top.vue';
import Schedule from './schedule.vue';
import choice from './choice.vue';
export default {
	data() {
		return {
			shareType: 5, //老师详情分享
			title: '',
			checkid: 0,
			checkidIndex: 0,
			tablist: [], //摄影师类型
			xs: -1, //摄影师类型id
			list: [],
			arrd: [],
			checkd: 0,
			arrs: [],
			checkds: 0,
			arra: [],
			hunlist: [],
			arrl: [
				{
					lei: '拍摄类型',
					content: '请选择',
					index: 0
				},
				{
					lei: '选择档期',
					content: '不指定',
					index: 1
				},
				{
					lei: '摄影师',
					content: '不指定',
					index: 2
				},
				{
					lei: '化妆师',
					content: '不指定',
					index: 3
				}
			],
			teatent: {},
			checkda: 0,
			showlx: false,
			qishow: false,
			shop_id: '', //老师id,
			page: 1,
			status: 0,
			totalNum: '',
			// 当前日期
			year: '',
			mouth: '',
			//查看档期数据
			paiqiObj: {},
			selectedTeacher: '', //选中的摄影师或化妆师,
			id: '',
			// 新娘预约
			orshow: false, // 预约弹窗
			tshow: false, //预约成功弹窗
			name: '', //姓名
			phone: '', //联系方式
			selectTime: false, //选择时间
			time: '', //日期
			startTime: '',
			endTime: '',
			code: '' //是否预约  1 没有
		};
	},
	components: {
		Top,
		Schedule,
		choice,
		shareBox
	},
	computed: {},
	onShow() {
		if (this.teatent.type == 1) {
			//摄影师
			if (uni.getStorageSync('addTeacher')) {
				//选择摄影师
				this.arrl[2].content = uni.getStorageSync('addTeacher').name ? uni.getStorageSync('addTeacher').name : '不指定';
				this.id = uni.getStorageSync('addTeacher').id ? uni.getStorageSync('addTeacher').id : '';
			}
			if (uni.getStorageSync('addTeacher2')) {
				//选择化妆师
				this.arrl[3].content = uni.getStorageSync('addTeacher2').name ? (this.arrl[3].content = uni.getStorageSync('addTeacher2').name) : '不指定';
				this.selectedTeacher = uni.getStorageSync('addTeacher2').name ? uni.getStorageSync('addTeacher2') : '';
			}
		} else {
			//化妆师
			if (uni.getStorageSync('addTeacher')) {
				//选择摄影师
				this.arrl[3].content = uni.getStorageSync('addTeacher').name ? uni.getStorageSync('addTeacher').name : '不指定';
				this.selectedTeacher = uni.getStorageSync('addTeacher').name ? uni.getStorageSync('addTeacher') : '';
			}
			if (uni.getStorageSync('addTeacher2')) {
				//选择化妆师
				this.arrl[2].content = uni.getStorageSync('addTeacher2').name ? uni.getStorageSync('addTeacher2').name : '不指定';
				this.id = uni.getStorageSync('addTeacher2').id ? uni.getStorageSync('addTeacher2').id : '';
			}
		}
		if (uni.getStorageSync('isyuyue')) {
			uni.removeStorageSync('isyuyue');
			this.enter();
		}
	},
	mounted() {},
	onLoad(option) {
		uni.removeStorageSync('addTeacher');
		uni.removeStorageSync('addTeacher2');
		if (option.worker_id) {
			this.$store.state.shopsname.id = option.shop_id;
			this.shop_id = option.shopid;
			this.title = option.shopname;
			this.id = option.worker_id;
		} else {
			this.title = this.$store.state.shopsname.shopname;
			this.shop_id = this.$store.state.shopsname.id;
			this.id = option.shopid;
		}

		this.teacont();

		this.year = this.getNowDate(1);
		this.mouth = this.getNowDate(2);
		this.setTime(this.year + '-' + String(this.mouth).padStart(2, '0'));
		this.getstype();
	},
	methods: {
		//跳转店铺详情
		goShopDetail() {
			uni.navigateTo({
				url: '/pages/store/goodsList'
			});
		},
		// 点击分享按钮
		fenXiang() {
			this.$refs.child.xianshi(this.shop_id);
		},
		seeDate() {
			uni.navigateTo({
				url: '/pages/schedule/lookSchedule?teacherId=' + this.id + '&type=' + 1
			});
		},
		//选择时间
		changeTime(e) {
			this.startTime = e;
			this.time = this.startTime + '至' + this.endTime;
		},
		changeTime1(e) {
			this.endTime = e;
			this.time = this.startTime + '至' + this.endTime;
		},
		screenTime() {
			this.time = this.startTime + '至' + this.endTime;
			this.selectTime = false;
			this.orshow = true;
		},
		// 确定预约
		enters() {
			if (!uni.getStorageSync('userInfo').id) {
				this.$wanlshop.msg('请先登录再操作');
				return;
			}
			if (this.name === '') {
				this.$wanlshop.msg('请输入姓名');
				return;
			}
			if (this.phone === '') {
				this.$wanlshop.msg('请输入联系方式');
				return;
			}
			if (this.time === '') {
				this.$wanlshop.msg('请选择结婚日期');
				return;
			}
			this.$request({
				url: 'wedding/dress_appointment',
				method: 'POST',
				data: {
					shop_id: this.$store.state.shopsname.id,
					to_id: this.id,
					user_id: uni.getStorageSync('userInfo').id,
					time_star: this.startTime,
					time_end: this.endTime,
					phone: this.phone,
					name: this.name,
					type: 1
				}
			}).then((res) => {
				const { code, data, msg } = res.data;
				if (code == 1) {
					this.orshow = false;
					uni.showToast({
						title: '预约成功',
						icon: 'success'
					});
				} else {
					uni.showToast({
						title: msg,
						icon: 'none'
					});
				}
			});
		},
		// 收藏
		doGood(e) {
			if (!uni.getStorageSync('userInfo').id) {
				this.$wanlshop.msg('请先登录再操作');
				return;
			}
			this.$request({
				url: 'wedding/wedding_user_add',
				method: 'POST',
				data: {
					user_id: uni.getStorageSync('userInfo').id,
					show_id: this.id,
					type: 1
				}
			}).then((res) => {
				if (res.data.code == 1) {
					if (res.data.data == 0) {
						this.teatent.do = 1;
					} else {
						this.teatent.do = 0;
					}
				} else {
					this.$wanlshop.msg(res.data.msg);
				}
			});
		},
		// 点击下一步
		nested() {
			if (!uni.getStorageSync('userInfo')) {
				uni.showToast({
					title: '请先登录再操作',
					icon: 'none'
				});
				return;
			}
			if (this.xs == -1) {
				uni.showToast({
					title: '请选择拍摄类型',
					icon: 'none'
				});
				return;
			}
			if (this.arrl[1].content == '不指定') {
				uni.showToast({
					title: '请选择档期',
					icon: 'none'
				});
				return;
			}

			let obj = {
				worker_z_id: '', //化妆师id
				worker_z_name: '',
				worker_s_id: '', //摄影师id
				worker_s_name: '',
				type_id: this.xs, //摄影分类id
				type_names: this.arrl[0].content,
				times: this.arrl[1].content
			};
			if (this.teatent.type == 1) {
				//摄影师
				obj.worker_s_id = this.id;
				obj.worker_z_id = this.selectedTeacher.id;
				obj.worker_z_name = this.arrl[3].content;
				obj.worker_s_name = this.arrl[2].content;
			} else {
				//化妆师
				obj.worker_z_id = this.id;
				obj.worker_s_id = this.selectedTeacher.id;
				obj.worker_z_name = this.arrl[2].content;
				obj.worker_s_name = this.arrl[3].content;
			}
			uni.navigateTo({
				url: './NestedSystem?obj=' + JSON.stringify(obj)
			});
		},
		//查看档期 月份加减
		leftArrow() {
			if (this.mouth == this.getNowDate(2) && this.year == this.getNowDate(1)) {
				return;
			}
			this.mouth--;
			if (this.mouth < 1) {
				this.year--;
				this.mouth = 12;
			}
			this.setTime(this.year + '-' + String(this.mouth).padStart(2, '0'));
		},
		rightArrow() {
			this.mouth++;
			if (this.mouth > 12) {
				this.year++;
				this.mouth = 1;
			}
			this.setTime(this.year + '-' + String(this.mouth).padStart(2, '0'));
		},
		// 查看档期
		setTime(e) {
			this.$request({
				url: 'wedding/worker_time',
				method: 'POST',
				data: {
					worker_id: this.id,
					time: e
				}
			}).then((res) => {
				let week = new Date(e + '-1').getDay();
				// 计算上个月的天数
				let years = 0;
				let months = 0;
				if (this.mouth - 1 < 1) {
					years = this.year - 1;
					months = 12;
				} else {
					years = this.year;
					months = this.mouth - 1;
				}
				let days = new Date(years, months, 0).getDate();
				for (let i = 0; i < week; i++) {
					let obj = {
						num: days - i,
						type: 4 //1空2满3休
					};
					res.data.data.date.unshift(obj);
				}
				for (let i = 0; i < res.data.data.date.length % 7; i++) {
					let obj = {
						num: i + 1,
						type: 4 //1空2满3休
					};
					res.data.data.date.push(obj);
				}
				this.paiqiObj = res.data.data;
			});
		},
		// 获取摄影师类型
		getstype() {
			this.$request({
				url: 'wedding/worker_appointment_type',
				method: 'POST',
				data: {
					shop_id: this.shop_id,
					worker_id: this.id
				}
			}).then((res) => {
				this.tablist = res.data.data;
			});
		},
		gethunlist() {
			uni.showLoading({
				title: '加载中...'
			});
			this.$request({
				url: 'wedding/wedding_show',
				method: 'POST',
				data: {
					show_type: this.teatent.type == 1 ? 3 : 1, //店铺作品风格这里，只需要显示摄影 风格
					page: this.page,
					work_id: this.id, //老师
					shop_id: this.$store.state.shopsname.id,
					type_p_id: this.checkid ? this.checkid : 0,
					type_id: this.checkd ? this.checkd : 0,
					wedding_show: this.checkds ? this.checkds : 0,
					wedding_type: this.checkda ? this.checkda : 0,
					user_id: uni.getStorageSync('userInfo').id ? uni.getStorageSync('userInfo').id : 0
				}
			}).then((res) => {
				if (res.data.code == 1) {
					if (this.page == 1) {
						this.hunlist = res.data.data.data;
					} else {
						this.hunlist.push(...res.data.data.data);
					}
					this.totalNum = res.data.data.last_page;
					uni.hideLoading();
				} else {
					this.$wanlshop.msg(res.data.msg);
					uni.hideLoading();
				}
			});
		},
		// 获取列表分类
		gethunlei() {
			this.$request({
				url: 'wedding/wedding_type',
				method: 'POST',
				data: {
					shop_id: this.$store.state.shopsname.id,
					show_type: this.teatent.type == 1 ? 3 : 1, //店铺作品风格这里，只需要显示摄影 风格
					work_id: this.id
				}
			}).then((res) => {
				if (res.statusCode == 200) {
					this.list = res.data.data.type;
					this.arrd = res.data.data.type[0].next;
					this.arrs = res.data.data.wedding_show;
					this.arra = res.data.data.wedding_type;
				}
			});
		},
		// 获取老师详情
		teacont() {
			this.$request({
				url: 'wedding/worker_info',
				method: 'POST',
				data: {
					id: this.id,
					user_id: uni.getStorageSync('userInfo').id ? uni.getStorageSync('userInfo').id : 0
				}
			}).then((res) => {
				if (res.statusCode == 200) {
					res.data.data.detail = res.data.data.detail.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, capture) => {
						var img = `<img style="display: block; width: 100%;" src="${capture}">`;
						return img;
					});
					res.data.data.detail = res.data.data.detail.replace(/<video [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, capture) => {
						var video = `<video style="display: block; width: 100%;" src="${capture}">`;
						return video;
					});
					this.teatent = res.data.data;
					if (this.teatent.type == 2) {
						this.arrl = [this.arrl[0], this.arrl[1], this.arrl[3], this.arrl[2]];
						uni.setStorageSync('addTeacher2', { id: this.id, name: this.teatent.name });
					} else {
						uni.setStorageSync('addTeacher', { id: this.id, name: this.teatent.name });
					}
					this.gethunlei();
					this.gethunlist();
				}
			});
		},
		chans(e, k) {
			this.xs = k;
			this.arrl[0].content = e.name;
			this.$refs['popupfen'].open();
			this.coslepop();
		},
		// 点击预约
		fen() {
			this.arrl[2].content = this.teatent.name;
			if (this.teatent.type == 1) {
				//摄影师
				this.$refs['popupfen'].open();
			} else {
				//化妆师
				this.$refs['popupShow'].open();
			}
		},
		//点击新娘预约
		xinNianYuYue() {
			this.$refs['popupShow'].close();
			this.orshow = true;
		},
		//点击拍摄预约
		paiSheYuYue() {
			this.$refs['popupShow'].close();
			this.$refs['popupfen'].open();
		},
		clofenl() {
			this.$refs['popupfen'].close();
		},
		chakan() {
			this.$refs['popupdd'].open();
		},
		clepop() {
			this.$refs['popups'].close();
		},
		openp() {
			this.$refs['popups'].open();
		},
		change(item, e, index) {
			this.checkid = e;
			this.arrd = this.list[index].next;
			this.checkidIndex = index;
			this.checkd = 0;
			this.checkds = 0;
			this.checkda = 0;
			this.page = 1;
			this.status = 1;
			this.gethunlist();
		},
		changea(item, e) {
			this.checkd = e;
			this.page = 1;
			this.status = 1;
			this.gethunlist();
		},
		changeas(item, e) {
			this.checkds = e;
			this.page = 1;
			this.status = 1;
			this.gethunlist();
		},
		changeaa(item, e) {
			this.checkda = e;
			this.page = 1;
			this.status = 1;
			this.gethunlist();
		},
		close() {
			this.qishow = false;
		},
		enter() {
			this.fen();
			this.qishow = false;
		},
		swpopup(i) {
			if (i == 0) {
				this.kai();
				this.clofenl();
			} else if (i == 1) {
				this.openp();
			} else {
				this.choteacher(i);
			}
		},
		kai() {
			this.$refs['popupdd'].open();
		},
		coslepop() {
			this.$refs['popupdd'].close();
		},
		goSelect(val) {
			this.arrl[1].content = val;
		},
		choteacher(i) {
			if (this.teatent.type == 1) {
				if (i == 2) {
					return;
				}
			} else {
				if (i == 3) {
					return;
				}
			}
			if (this.xs == -1) {
				uni.showToast({
					title: '请选择拍摄类型',
					icon: 'none'
				});
				return;
			}
			if (this.arrl[1].content == '不指定') {
				uni.showToast({
					title: '请选择档期',
					icon: 'none'
				});
				return;
			}
			let obj = {
				type: i,
				type_id: this.xs,
				time: this.arrl[1].content,
				isShowFree: 1
			};

			uni.navigateTo({
				url: `./select?obj=${JSON.stringify(obj)}`
			});
		},
		onReachBottom() {
			if (this.page < this.totalNum) {
				this.status = 0;
				this.page++;
				this.gethunlei();
			} else {
				this.$wanlshop.msg('我是有底线的!');
			}
		},
		getNowDate(type) {
			let date = new Date();
			let y = date.getFullYear();
			let m = date.getMonth() + 1;
			let d = date.getDate();
			if (type == 1) {
				return y;
			} else if (type == 2) {
				return m;
			}
		}
	}
};
</script>
<style>
page {
	background: #111;
}
</style>
<style scoped lang="scss">
// 工作室
.studio {
	height: 136rpx;
	width: 662rpx;
	padding: 0 24rpx;
	margin: 0rpx auto;
	border-radius: 20rpx;
	background: linear-gradient(180deg, #352a1d 0%, #463928 100%);

	.center_details {
		height: 88rpx;

		.top {
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 500;
			font-size: 28rpx;
			color: #ebbe87;
		}
	}

	.btn_goin {
		width: 88rpx;
		height: 54rpx;
		background: #ebbe87;
		border-radius: 78rpx;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 500;
		text-align: center;
		line-height: 54rpx;
		font-size: 24rpx;
	}

	.leftPhoto {
		width: 88rpx;
		height: 88rpx;
		margin-right: 24rpx;
		border-radius: 50%;
		font-size: 0;
		overflow: hidden;
		image {
			width: 100%;
			height: 100%;
		}
	}

	.line {
		width: 2rpx;
		height: 18rpx;
		margin: 0 16rpx;
		background-color: rgba(255, 255, 255, 0.6);
	}

	.tips {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.6);
	}
}

.pop {
	.vue-ref {
		padding-bottom: 0 !important;
	}
}

.brief_box {
	width: 100%;
	text-align: center;
	margin-top: 40upx;
	position: relative;

	.tox {
		width: 340upx;
		height: 340upx;
		border-radius: 50%;
	}

	.name {
		text-align: center;
		color: #fff;
		font-size: 36upx;
		margin-top: 30upx;
	}

	.ltx {
		font-size: 24upx;
		color: #a0a0a0;
		margin-top: 22upx;
	}

	.rightMenu {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
	}
}

.jianjie {
	width: 686upx;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	margin-top: 40upx;

	.jianl {
		color: #f9e8be;
		font-size: 26upx;

		.jnm {
			width: 36upx;
			height: 36upx;
			display: inline-block;
			vertical-align: middle;
			margin-top: -8upx;
			margin-left: 6upx;
		}
	}

	.jianr {
		color: #f9e8be;
		font-size: 26upx;

		.jnr {
			width: 36upx;
			height: 36upx;
			display: inline-block;
			vertical-align: middle;
			margin-top: -8upx;
			margin-right: 8upx;
		}
	}
}

.daboxk {
	width: 690upx;
	margin: 0 auto;
	margin-top: 28upx;
	border-top: 1rpx solid transparent;
	border-bottom: 1rpx solid transparent;
	background: linear-gradient(180deg, #605b4b, rgba(137, 127, 100, 0), #605b4b);
	border-radius: 32upx;

	.ziknm {
		width: 686upx;
		background: #111111;
		border-radius: 32upx;
		display: block;
		margin: 0 auto;
	}
}

.sbox {
	width: 686upx;
	background: linear-gradient(180deg, rgba(250, 223, 156, 0.06) 0%, rgba(250, 223, 156, 0) 100%);
	border-radius: 32upx;
	display: block;
	margin: 0 auto;
	.text {
		color: #cccccc;
		font-size: 26rpx;
		line-height: 200%;
		word-break: break-all;
		margin: 32upx 36upx;
	}

	.txtg {
		width: 614upx;
		color: #ccc;
		font-size: 26upx;
		margin: 0 auto;
		line-height: 57upx;
	}
}

.feng {
	white-space: nowrap;
	width: 100%;
	margin-top: 32upx;
	margin-left: 40rpx;

	.dang {
		margin-right: 54upx;
		text-align: center;
		width: 90upx;

		.tuk {
			width: 82upx;
			height: 82upx;
			background: #323238;
			border-radius: 50%;
		}

		.name {
			color: #cccccc;
			font-size: 26upx;
			margin-top: 20upx;
		}
	}
}

.chakan {
	// height: 160upx;
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	background: #181819;
	padding-top: 10upx;
	padding-bottom: 10upx;

	.head {
		width: 686upx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;

		.hl {
			width: 90upx;
			text-align: center;
			display: flex;
			flex-flow: column;
			justify-content: space-between;
			height: 80upx;

			.hjnm {
				width: 40upx;
				height: 40upx;
				margin: 0 auto;
				margin-top: 5upx;
			}

			.naml {
				color: #cbc3b9;
				font-size: 22upx;
				line-height: 22upx;
			}
		}

		.hr {
			width: 584upx;
			height: 80upx;
			background: linear-gradient(270deg, #b49c6e 0%, #ecd9af 100%);
			border-radius: 40upx;
			text-align: center;
			line-height: 80upx;
			color: #111111;
			font-size: 28upx;
		}
	}
}

.boxs {
	position: relative;
	width: 100%;

	.jian {
		position: absolute;

		background: #111111;
		width: 82rpx;
		height: 100rpx;
		right: 0;
		top: 0;

		.jianl {
			background: url(../../static/manner/jian.png) no-repeat center;
			background-size: 100%;
			width: 40rpx;
			height: 40rpx;
			margin-top: 30rpx;
			transition: all 0.5s;
			transform: rotateZ(180deg);

			&.ent {
				transform: rotateZ(360deg);
			}
		}
	}
}

.scroll {
	width: 750upx;
	white-space: nowrap;
	position: relative;
	border-bottom: 2rpx solid #2c2d2f;
	height: 100rpx;

	.tiao {
		position: absolute;
		width: 38rpx;
		height: 4rpx;
		background: #f9e8be;
		bottom: 60rpx;
		transition: all 0.5s;
	}

	.btn {
		display: inline-block;
		color: #fff;
		width: 120rpx;
		text-align: center;
		color: #999;
		font-size: 28rpx;
		line-height: 100rpx;

		&.check {
			color: #f9e8be;
		}
	}

	.btns {
		font-size: 24upx;
		color: #666;
		width: 120upx;
	}
}

.lx_box {
	width: 690rpx;
	margin: 0 auto;

	.lx_scroll {
		white-space: nowrap;
		margin-top: 24rpx;

		.lx_btn {
			display: inline-block;
			color: #666666;
			font-size: 26rpx;
			margin-right: 56rpx;

			&.check {
				color: #f9e8be;
			}
		}
	}
}

.imgd_box {
	width: 690rpx;
	margin: 0 auto;
	column-count: 2;
	margin-top: 30rpx;

	.box_cd {
		background: #161616;
		border-radius: 8rpx;
		padding-bottom: 24rpx;
		width: 336rpx;
		margin-bottom: 14rpx;
		break-inside: avoid-column;

		.imgt {
			width: 100%;
			display: block;
		}

		.named_box {
			width: 300rpx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			margin-top: 24rpx;

			.nal {
				color: #fff;
				font-size: 28rpx;
			}
		}
	}
}

.pokml {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: #111111;
	overflow: scroll;
}

.fen {
	width: 100%;
	background: #fff;
	border-radius: 32upx 32upx 0 0;
	padding-bottom: 200upx;
	position: relative;
	margin-bottom: -120upx;
}

.boxfen {
	width: 100%;
	font-size: 32upx;
	background-color: white;
	box-sizing: border-box;
	border-radius: 32upx 32upx 0 0;

	margin-bottom: -65upx;

	.hbng {
		padding: 16upx 30upx 10upx 20upx;
		background: linear-gradient(180deg, #fff7ea 0%, rgba(255, 255, 255, 0) 100%);
		border-radius: 32upx 32upx 0 0;
	}

	.fenicon {
		width: 26upx;
		height: 26upx;
		font-weight: 550;
		padding: 16upx;
		display: inline-block;
	}

	.boxfen-list {
		padding: 32upx 32upx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid rgb(247, 247, 247);

		.boxfen-lei {
			color: rgb(121, 121, 121);
		}

		.black {
			color: #111111;
		}

		.flex-icon {
			color: #999999;
		}
	}

	.boxfen-btn {
		padding: 50upx 20upx;

		button {
			background-color: #111;
			border-radius: 45upx;
			color: white;
		}
	}
}

.boxkl {
	width: 100%;
	background: #fff;
	border-radius: 32upx 32upx 0 0;
	padding-bottom: 200upx;
	position: relative;
	margin-bottom: -120upx;

	.hbng {
		width: 750upx;
		height: 130upx;
		background: linear-gradient(180deg, #fff7ea 0%, rgba(255, 255, 255, 0) 100%);
		border-radius: 32upx 32upx 0 0;

		.iconk {
			width: 36upx;
			height: 36upx;
			background: url(../../static/tab_jian.png) no-repeat center;
			background-size: 100%;
			margin-left: 36upx;
			padding-top: 46upx;
		}
	}

	.scoll {
		width: 100%;
		height: 400upx;
		margin: 0 auto;
		margin-top: -40upx;
		background: #fff;

		.txtg {
			width: 100%;
			height: 88upx;
			text-align: center;
			line-height: 88upx;
			color: #111111;
			font-size: 30upx;

			&.check {
				background: linear-gradient(86deg, rgba(237, 237, 237, 0) 0%, #ededed 54%, rgba(237, 237, 237, 0) 100%);
			}
		}
	}
}

// 新娘预约
.price_popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(17, 17, 17, 0.5);

	.box_inp {
		width: 100%;
		background: #fff;
		position: absolute;
		height: 700upx;
		left: 0;
		bottom: 0;
		border-radius: 32upx 32upx 0px 0px;
		animation: move 0.2s 0s linear normal;

		.inph {
			background: linear-gradient(180deg, #fff7ea 0%, rgba(255, 255, 255, 0) 100%);
			height: 100upx;
			border-radius: 32upx 32upx 0px 0px;

			.icon {
				width: 36upx;
				height: 36upx;
				background: url(../../static/tab_jian.png) no-repeat center;
				background-size: 100%;
				margin-left: 28upx;
				padding-top: 42upx;
			}
		}

		.titled {
			width: 686upx;
			margin: 0 auto;
			color: #111111;
			margin-top: 10upx;
			font-size: 30upx;
		}

		.inpd {
			width: 686upx;
			height: 80upx;
			border-radius: 40upx;
			border: 1px solid #cccccc;
			margin: 0 auto;
			margin-top: 32rpx;
			display: flex;
			justify-content: space-between;

			.inpty {
				margin-left: 36upx;
				height: 80upx;
				background: transparent;
				width: 400upx;
				color: #000;
				font-size: 28rpx;
			}

			.inps {
				color: #cccccc;
				font-size: 28rpx;
			}

			.ickl {
				width: 38rpx;
				height: 38rpx;
				margin-right: 36rpx;
				margin-top: 21rpx;
				background: url(../../static/Vector.png) no-repeat center;
				background-size: 100%;
				// background: #111;
			}
		}

		.enty {
			width: 686upx;
			height: 80upx;
			background: #111111;
			border-radius: 40upx;
			margin: 0 auto;
			margin-top: 64upx;
			color: #fff;
			text-align: center;
			line-height: 80upx;
			font-size: 28upx;
		}
	}

	@keyframes move {
		from {
			height: 0upx;
		}

		to {
			height: 700upx;
		}
	}
}

.tikun {
	width: 468upx;
	height: 270upx;
	background: #ffffff;
	border-radius: 32upx;

	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -234upx;
	margin-top: -135upx;

	.txt {
		width: 354upx;
		text-align: center;
		color: #000;
		font-size: 30upx;
		margin: 0 auto;
		padding-top: 50upx;
		font-weight: 550;
		line-height: 50rpx;
	}

	.ent {
		border-top: 2upx solid #f4f4f4;
		text-align: center;
		margin-top: 30upx;
		line-height: 92upx;
		font-size: 32upx;
		color: #ebbe87;
	}
}

// 选择日期
.head_riqi_box {
	align-items: center;

	/deep/ .uni-date {
		flex: 1;
		width: 100%;
		height: 100%;
		background: #f3f3f3;
		border-radius: 58upx;
	}

	/deep/ .uni-date-x--border {
		border: none !important;
	}

	.zhi_txt {
		width: 30rpx;
		color: #000;
		line-height: 80upx;
	}

	.shaixuan_btn {
		width: 104upx;
		height: 50upx;
		background: #666;
		border-radius: 25upx;
		line-height: 50upx;
		color: #fff;
		margin-top: 18upx;
		margin-left: 6upx;
	}
}
</style>
